<template>
    <j-modal :title="data.id ? '编辑' : '新增'" visible @cancel="handleCancel">
        <j-form :model="formData" layout="vertical" ref="formRef">
            <j-form-item label="点位名称" name="name" :rules="rules.name">
                <j-input
                    placeholder="请输入点位名称"
                    v-model:value="formData.name"
                    :maxlength="64"
                />
            </j-form-item>
            <j-form-item label="对象ID" :name="['configuration', 'ObjectId']">
                <j-card>
                    <j-form-item label="对象类型">
                        <j-input
                            v-model:value="formData.configuration.objectId.type"
                            disabled
                        ></j-input>
                    </j-form-item>
                    <j-form-item label="对象实例号">
                        <j-input
                            v-model:value="
                                formData.configuration.objectId.instanceNumber
                            "
                            disabled
                        ></j-input>
                    </j-form-item>
                </j-card>
            </j-form-item>
            <j-form-item
                label="属性ID"
                :name="['configuration', 'propertyId']"
                :rules="rules.configuration.pointAddress"
            >
                <j-input
                    v-model:value="formData.configuration.propertyId"
                    disabled
                ></j-input>
            </j-form-item>
            <j-form-item label="值类型" :name="['configuration', 'valueType']">
                <j-select v-model:value="formData.configuration.valueType">
                    <j-select-option
                        v-for="item in bacnetValueType"
                        :key="item"
                        :value="item"
                        >{{ item }}</j-select-option
                    >
                </j-select>
            </j-form-item>
            <j-form-item
                label="访问类型"
                name="accessModes"
                :rules="rules.accessModes"
            >
                <j-card-select
                    multiple
                    :showImage="false"
                    v-model:value="formData.accessModes"
                    :options="[
                        { label: '读', value: 'read' },
                        { label: '写', value: 'write' },
                        { label: '订阅', value: 'subscribe' },
                    ]"
                    :column="3"
                />
            </j-form-item>
            <j-form-item
                :name="['configuration', 'terms']"
                :rules="[
                    {
                        validator: Area,
                        trigger: 'change',
                    },
                ]"
            >
                <template #label>
                    <j-space>
                        <span>点位死区</span
                        ><span class="explain"
                            >点位死区范围内的异常数据将被过滤（请勿配置非数值类型）</span
                        >
                    </j-space>
                </template>
                <DeathArea v-model:value="formData.configuration.terms" />
            </j-form-item>
            <j-form-item
                label="轮询任务"
                :name="['configuration', 'interval']"
                :rules="rules.configuration.interval"
            >
                <p>
                    采集频率<span
                        style="
                            margin-left: 5px;
                            color: #9d9ea1;
                            font-size: 12px;
                        "
                        >采集频率为0时不执行轮询任务</span
                    >
                </p>
                <j-input-number
                    style="width: 100%"
                    placeholder="请输入采集频率"
                    v-model:value="formData.configuration.interval"
                    addon-after="ms"
                    :max="2147483648"
                    :min="0"
                />
            </j-form-item>
            <j-form-item name="features">
                <j-checkbox-group v-model:value="formData.features">
                    <j-checkbox value="changedOnly"
                        >只推送变化的数据</j-checkbox
                    >
                </j-checkbox-group>
            </j-form-item>
            <j-form-item label="说明" name="description">
                <j-textarea
                    placeholder="请输入说明"
                    v-model:value="formData.description"
                    :maxlength="200"
                    :rows="3"
                    showCount
                />
            </j-form-item>
        </j-form>
        <template #footer>
            <j-button @click="handleCancel">取消</j-button>
            <PermissionButton
                key="submit"
                type="primary"
                :loading="loading"
                @click="handleOk"
                style="margin-left: 8px"
                :hasPermission="`DataCollect/Collector:${
                    data.id ? 'update' : 'add'
                }`"
            >
                确认
            </PermissionButton>
        </template>
    </j-modal>
</template>
<script setup lang="ts">
import {
    savePoint,
    updatePoint,
    getBacnetValueType,
} from '@/api/data-collect/collector';
import { randomString } from '@/utils/utils';
import DeathArea from './DeathArea.vue';
const props = defineProps({
    data: {
        type: Object,
        default: () => {},
    },
});

const emit = defineEmits(['change']);

const loading = ref(false);
const formRef = ref();
const formData = ref({
    name: props.data.name,
    configuration: props.data.configuration || {
        valueType: undefined,
        pointAddress: '',
        interval: 3000,
    },
    accessModes: [],
    features: [],
    description: props.data.description || '',
});

const rules = {
    name: [
        {
            required: true,
            message: '请输入名称',
            trigger: 'blur',
        },
    ],
    configuration: {
        typeIdentifierName: [
            {
                required: true,
                message: '请输入类型标识',
                trigger: 'change',
            },
        ],
        pointAddress: [
            {
                required: true,
                message: '请输入地址',
                trigger: 'blur',
            },
        ],
        interval: [
            {
                required: true,
                message: '请输入采集频率',
                trigger: 'change',
            },
        ],
    },
    accessModes: [
        {
            required: true,
            message: '请选择访问类型',
            trigger: 'change',
        },
    ],
};

const Area = (_: any, value: any): Promise<any> =>
    new Promise(async (resolve, reject) => {
        if (!value) {
            return resolve('');
        }
        if (value?.length === 0) {
            return resolve('');
        } else if (value?.length === 1) {
            return value[0].value && value[0].termType
                ? resolve('')
                : reject('请配置点位死区');
        } else {
            if (value?.[0].column === 'currentValue') {
                // value.forEach((item:any) => {
                //     if(item.termType && item.value){
                //        return resolve('')
                //     }else{
                //         return reject('请配置点位死区')
                //     }
                // });
                const pass = value.every(
                    (item: any) => item.termType && item.value,
                );
                return pass ? resolve('') : reject('请配置点位死区');
            } else {
                const validate = value.find((item: any) => {
                    item.column ===
                        `this['currentValue'] - this['lastValue']*init/100`;
                });
                return validate ? reject('请配置点位死区') : resolve('');
            }
        }
    });
const bacnetValueType = ref<string[]>([]);

const getIdAndType = async () => {
    //   const res = await getBacnetPropertyId()
    //   if(res.success) {
    //     bacnetPropertyId.value = res.result
    //   }
    const resp: any = await getBacnetValueType();
    if (resp.success) {
        bacnetValueType.value = resp.result;
    }
};

getIdAndType();
const handleOk = async () => {
    const res: any = await formRef.value?.validate();

    const params = {
        ...res,
        configuration: {
            ...res.configuration,
            objectId: props.data.configuration?.objectId,
        },
        inheritBreaker: true,
        pointKey: props.data.pointKey || randomString(9),
        provider: props.data.provider,
        collectorId: props.data.collectorId,
        accessModes: res?.accessModes.filter((item: any) => item),
    };
    loading.value = true;
    const response = !props.data.id
        ? await savePoint(params).catch(() => {})
        : await updatePoint(props.data.id, { ...props.data, ...params }).catch(
              () => {},
          );
    emit('change', response?.status === 200);
    loading.value = false;
};

const handleCancel = () => {
    emit('change', false);
};

onMounted(() => {
    formData.value.features = props.data.features?.map(
        (item: any) => item.value,
    );
    if (props.data.accessModes?.length !== 0) {
        formData.value.accessModes = props.data.accessModes?.map(
            (item: any) => item.value,
        );
    }
});
</script>
